在確定了核心功能和資訊架構後，下一步就是將抽象的頁面階層設計出視覺化的產品雛形（Mockup）。

為了在 MVP 階段快速搭建原型並維持簡潔的風格，我選擇使用 Bootstrap 5 的設計系統與樣式庫。除了活用之前的學習成果，也想藉此挑戰自己：「在脫離課程提供的 Figma 設計稿的情況下，是否真的學會運用 Bootstrap 5 的元件庫，獨立構建出符合邏輯的介面？」

核心互動設計與 Bootstrap 元件對應

為了打造流暢的使用者體驗，我將 IA 中的核心功能模組與 Bootstrap 5 元件進行了以下對應與設計思考：

1. 無縫的視圖切換：Navs & Tabs (.nav-tabs)

• 設計考量：傳統網站多採用 Header 導覽列超連結，但對於工具型應用而言，網頁重新載入會打斷使用者的專注狀態。為了保有工具的一體感與操作流暢度，採用 SPA (Single Page Application) 概念。

• 元件套用：使用 Bootstrap 的 Navs & Tabs 元件。透過 JavaScript 觸發 Tab 切換，無需重新載入頁面即可在「計時器」、「任務列表」與「FAQ」三個核心視圖間切換。

2. 靈活的任務選取：Input Group 與 Dropdown (.input-group)

• 設計考量：在開始計時前，使用者可以快速指定當前的「主任務」與「子任務」。

• 元件套用：結合 Bootstrap 的 Input Group 與 Dropdown，將主任務與子任務選單組合在一起，形成緊湊且直覺的操作列，減少介面視覺雜訊。

[↓運用Input Group 與 Dropdown 來進行任務的選取]

3. 清楚的任務階層展現：Accordion 折疊卡片 (.accordion)

• 設計考量：任務列表需要同時呈現「主任務」與「子任務明細」。如果一次列出所有內容，介面會過於擁擠。

• 元件套用：將 Accordion 進行客製化變化。以主任務作為手風琴標題（同時顯示完成度進度條與總時數），展開後可檢視與操作子任務清單。

[↓將Accordion 稍加變化之後，讓主子任務在視覺上有所劃分]

4. 降低上手門檻：經典 FAQ 折疊區塊 (.accordion)

• 設計考量：方便使用者快速查找對應解答，同時避免資訊一次性堆疊，保持介面簡潔。

• 元件套用：採用標準的 Bootstrap Accordion 手風琴元件，收納常見 Q&A，讓版面保持整潔，需要時再展開閱讀。

[↓使用原生Accordion 元件]

小結

直接使用 Bootstrap 5 的設計系統和元件庫，讓我可以快速搭建出產品的雛形，並減少很多複雜的設計決策。